<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%String basePath = request.getContextPath();%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>欢迎登录用户管理系统</title>
		<link type="text/css" rel="stylesheet" href="<c:url value="/js/thirdparty/validation/cmxform.css"/>" />
		<script type="text/javascript" src="<%=basePath%>/js/thirdparty/jquery.min.js" ></script>
		<script type="text/javascript" src="<%=basePath%>/js/thirdparty/validation/jquery.json-2.4.js"></script>
		<script type="text/javascript" src="<%=basePath%>/js/thirdparty/validation/jquery.validate.min.js"></script>
		<script type="text/javascript" src="<%=basePath%>/js/thirdparty/validation/messages_cn.js"></script>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			body{background: url(images/login/loginbg.png) repeat;font-size: 18px;font-family: Arial;}
			#loginBox{width: 403px;position: absolute;left: 50%;top: 50%;margin-left: -202px;margin-top: -202px;}
			#loginBox h3 img{display: block;margin: 0 auto 12px;}
			#loginBox p{margin-bottom: 17px;height: 53px;position: relative;}
			#loginBox p input{width: 403px;height: 53px;background: url(images/login/inputbg.png) no-repeat;border: none;color: #D1CFCF;font-weight: bold;text-indent: 55px;}
			#loginBox p input.username{background-position: 0 0;}
			#loginBox p input.password{background-position: 0 -81px;}
			#loginBox p input.code{background-position: 0 -168px;width: 263px;}
			#loginBox p img{position: absolute;right: 0;top: 0;cursor:pointer;}
			#btn{text-align: center;}
			#btn input{width: 148px;height: 41px;background: url(images/login/inputbg.png) 0 -236px no-repeat;border: none;cursor:pointer;}
		</style>
	    <script type="text/javascript">
	    var ctxPath = "<%=request.getContextPath()%>";
	    	$(function() {
	    		$('#loginForm').validate({
					rules : {
						uname : 'required',
						pass : 'required',
						validateNumber : 'required'
					},
					messages : {
					}
				});
	    		
	    	});
	    	function error(){
	    		if('${info}' != ''){
	    			$("#showMsg").html("${info}");  
			    }
	    	};
	    	
	    	function  loginIn(userName, password, validateCode){
	    		var employee = {
	    				"name":userName,
	    				"pass":password,
	    				"validateNumber":validateCode
	    			};
	    		if($("#loginForm").valid()){
	    			//登录数据校验
	    			$.ajax({
							url : ctxPath+"/systemUser/loginUserCheck",
							type : "post",
							data:$.toJSON(employee),
							async:false,
							contentType:"application/json;charset=UTF-8", 
							success : function(result) {
								if (result.success==false) {
									refeshCode();
									$("#showMsg").html(result.data);  
									return false;
								} else if(result.success==true){
									$("#loginForm").submit();
								}else{
									$("#showMsg").html("登录异常!");  
									return false;
								}
							},
							error:function(){
								 refeshCode();
							}
						 });
	    		}
	    	};
	    	
	    	function cleanError(){
	    		$("#showMsg").html('');  
	    	}
	       
	    	/**刷新验证码*/
	    	function refeshCode() {
	    		$('#shoppingCaptchaImg').attr('src','<%=basePath%>/CaptchaImg?rand='+ Math.random());
	    	};
	    	window.onload=function(){
	    		var w = document.documentElement.clientWidth;
	    		var h = document.documentElement.clientHeight;
	    		document.getElementsByTagName('body')[0].style.width=w+'px';
	    		document.getElementsByTagName('body')[0].style.height=h+'px';
	    	}
	    </script>
	</head>
	<body>
	 <div id="loginBox">
		<h3><img src="images/login/logo.png" alt=""></h3>
	    <form action="<%=basePath%>/systemUser/loginUser" id="loginForm" method="post">	
		    <p><input type="text" name="uname" id="userName" placeholder="username" class="username" onfocus="cleanError();"></p>
		    <p><input type="password" name="pass" id="password" placeholder="password" class="password" onfocus="cleanError();"></p>
		    <p><input type="text"  name="validateNumber" id="check" placeholder="" class="code" onfocus="cleanError();"  onkeypress="if(event.keyCode==13) {loginIn($('#userName').val(),$('#password').val(),$('#check').val());return false;}">
		    <a href="javascript:refeshCode()">
		      <img  alt="" id="shoppingCaptchaImg"  src="<%=basePath%>/CaptchaImg"  width="123" height="45"></a></p>
		    <div id="btn"><input type="button" value="" onClick="loginIn($('#userName').val(),$('#password').val(),$('#check').val());"></div>
		    <div style="padding:5px 0;font-size:1em;font-family:sans-serif;text-align:center;color:red;" id="showMsg"></div>
	   </form>
	 </div>
   </body>
</html>